<script setup lang="ts">
import { ReadOutlined, FieldTimeOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'
import { useRouter } from 'vue-router'

// 引入课程数据
const props = defineProps(['courses'])
const courses = props.courses

// 引入路由
const router = useRouter()

// 跳转课程详情
const goToCourseDetail = () => {
  router.push('/search-details')
}
</script>

<template>
  <div class="course-card" @click="goToCourseDetail">
    <div class="course-card-content" v-for="(item, index) in courses" :key="item.id">
      <img class="course-card-content-image" :src="item.url" alt="" />
      <h4>{{ item.name }}</h4>
      <p class="course-card-content-text">
        {{ item.description }}
      </p>
      <div class="course-card-content-lecture">
        <div>
          <a-button shape="circle" :icon="h(ReadOutlined)" />
          <span class="course-card-content-lecture-text">讲座</span>
        </div>
        <div>
          <a-button shape="circle" :icon="h(FieldTimeOutlined)" />
          <span class="course-card-content-lecture-text">40分钟前</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$borderRadius: 0.625rem;
$fontSize: 1.0625rem;

.course-card {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  margin-bottom: 3.125rem;
  overflow-y: hidden;

  &-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
    background-color: rgb(255 255 255);
    border-radius: $borderRadius;

    &-image {
      height: 12.5rem;
      border-radius: $borderRadius;
    }

    &-text {
      font-size: $fontSize;
    }

    &-lecture {
      display: flex;
      justify-content: space-between;

      &-text {
        margin-left: 0.625rem;
        font-size: 0.75rem;
      }
    }
  }
}
</style>
